<template>
  <div class="visual-comparison-modal">
    <visual-comparison-item
      v-for="(node, index) in comparisonVisualList"
      :key="'node' + index"
      :style="{width: (100 / comparisonVisualList.length) + '%'}"
      :comparison-visual-item="node"
    />
  </div>

</template>

<script lang="ts">
  import Vue from 'vue'
  import Component from 'vue-class-component'
  import {Prop} from 'vue-property-decorator'
  import VisualComparisonItem from '@/components/studio/data/popup/VisualComparisonItem.vue'

  @Component({
    components: {
      VisualComparisonItem
    },
  })
  export default class VisualComparison extends Vue {
    @Prop({type: Array, default: () => {return []}})
    comparisonVisualList!: Array<any>
  }
</script>

<style lang="less" scoped>

  /* 内容 */
  .visual-comparison-modal {
    display: flex;
    height: 20vw;
    overflow: hidden;
    width: 100%;
  }

</style>
